<template>
    <view class="page">
        <o-navbar :isFixed="true" :background="{ backgroundColor: '#214a75' }">
            <view slot="content" class="nav-bar">
                <text style="color: #fff;font-weight: bold;">会员圈</text>
            </view>
        </o-navbar>
        <div class="tabs">
            <div
                @tap="
                    goodsData = [];
                    active_tab = 'new';
                    cat_id = 3;
                    getList();
                "
                :class="{ active: active_tab == 'new' }"
                class="tabs-item"
            >
                最新
            </div>
            <div
                @tap="
                    goodsData = [];
                    active_tab = 'zan';
                    cat_id = 3;
                    getList();
                "
                :class="{ active: active_tab == 'zan' }"
                class="tabs-item"
            >
                晒单
            </div>
        </div>
        <div class="list" v-if="active_tab == 'new'">
		
            <div class="list-item" v-for="(item, index) in goodsData" :key="index">
                <div class="user-info">
                    <div class="pic">
                        <image :src="item.avatar" mode="scaleToFill" />
                    </div>
                    <div class="flex-col">
                        <div style="color: #2e2e2e;">{{ item.nickname }}</div>
                        <div style="color: #b3b3b3;">{{ item.create_time }}</div>
                        <!-- <div class="dot">
                            <div class="dot-item"></div>
                            <div class="dot-item"></div>
                            <div class="dot-item"></div>
                        </div> -->
                    </div>
                </div>
                <div style="color: #4d4d4d;" class="title">{{ item.good_name }}</div>
                <!-- <div style="color: #808080;" class="title">{{ item.content }}</div> -->
				
                <div class="image-list">
                    <image v-for="(v, i) in item.img" :key="i" :src="v" mode="scaleToFill" />
                </div>
                <!-- <div class="icon">
                    <div class="icon-item">
                        <image src="" mode="scaleToFill" />
                        222
                    </div>
                    <div class="icon-item">
                        <image src="" mode="scaleToFill" />
                        222
                    </div>
                    <div class="icon-item">
                        <image src="" mode="scaleToFill" />
                        222
                    </div>
                </div> -->
            </div>
        </div>
        <div class="list" v-else>
            <div class="list-item" v-for="(item, index) in goodsData" :key="index">
                <div class="user-info">
                    <div class="pic">
                        <image :src="item.avatar" mode="scaleToFill" />
                    </div>
                    <div class="flex-col">
                        <div style="color: #2e2e2e;">{{ item.nickname }}</div>
                        <div class="dot">
                            ⭐️⭐️⭐️
                        </div>
                    </div>
                </div>
                <div style="color: #4d4d4d;" class="title">{{ item.create_time }}</div>
                <div style="color: #808080;" class="title">{{ item.content }}</div>
                <div class="image-list">
                    <image v-for="(v, i) in item.img" :key="i" :src="v" mode="scaleToFill" />
                </div>
                <div class="remark" v-if="item.remark">{{ item.remark}}</div>
                <div class="tips">
                    {{item.good_name}}
                    <image src="" mode="scaleToFill" />
                </div>
            </div>
        </div>
        <view class="edgeInsetBottom"></view>
    </view>
</template>

<script>
import ONavbar from "../components/o-navbar/index.vue";
export default {
    data() {
        return {
            WanlScroll: 0, //记录页面滚动
            scrollStype: false, //滚动状态
            filterIndex: 0, //
            priceOrder: 0, //1 价格从低到高 2价格从高到低
            liststyle: "col-1-10", //列表样式
            goodsData: [], //商品列表数据
            showRight: false,
            category: "",
            goodsType: "goods",
            empty: "没有找到任何宝贝",
            active_tab: "new",
            params: {
                page: 1,
            },
            likeData: [],
            reload: false, //判断是否上拉
            last_page: 0,
            status: "loading",
            contentText: {
                contentdown: "",
                contentrefresh: "正在加载..",
                contentnomore: "没有更多数据了",
            },
            cat_id: 3,
        };
    },
    onLoad(option) {
        if (option.type) {
            this.goodsType = option.type;
        }
        if (option.search) {
            //如果搜索存在
            this.params.search = option.search;
            this.drawerParams.search = option.search;
        } else if (option.data) {
            var data = JSON.parse(option.data);
            this.drawerParams.category_id = data.category_id;
            this.category = data.category_name;
            this.params.filter.category_id = data.category_id;
            this.params.op.category_id = "in";
        } else {
            console.log("调试模式");
        }
        // 加载位置，后续版本开启加载写入全局
        // uni.getLocation({
        //     type: "wgs84",
        //     geocode: true,
        //     success: (mres) => {
        //         uni.request({
        //             url: "https://restapi.amap.com/v3/geocode/regeo",
        //             data: {
        //                 key: this.$wanlshop.config("amapkey"),
        //                 location: mres.longitude + "," + mres.latitude,
        //             },
        //             success: (res) => {
        //                 if (res.statusCode == 200) {
        //                     let address = res.data.regeocode.addressComponent;
        //                     this.drawerData.sameCity.name = address.province;
        //                 }
        //             },
        //         });
        //     },
        // });
        this.getList();
        if (this.goodsData.length == 0) {
            // this.loadlikeData();
        }
    },
    // 监听上拉
    onPullDownRefresh() {
        this.params.page = 1;
        this.reload = true;
        this.getList();
    },
    // 下拉刷新
    onReachBottom() {
        if (this.params.page >= this.last_page) {
            this.status = "noMore";
        } else {
            this.reload = false;
            this.contentText.contentdown = "上拉显示更多";
            this.params.page = this.params.page + 1; //页码+1
            this.status = "loading";
            this.getList();
        }
    },
    // 监听滚动
    onPageScroll(object) {
        if (object.scrollTop > this.WanlScroll) {
            this.scrollStype = false;
        } else {
            this.scrollStype = true;
        }
        if (object.scrollTop < 0) {
            this.scrollStype = false;
        }
        this.WanlScroll = object.scrollTop;
    },
    // 监听返回
    onUnload() {
        if (this.showRight) {
            this.closeDrawer();
            return true;
        }
    },
    methods: {
        async getList() {
            this.params.cat_id = this.cat_id;
            this.params.flag = "new";
            await uni.request({
                url: "/api/Xiaoyouquan/xyqList",
                data: this.params,
                success: (res) => {
                    uni.stopPullDownRefresh();
                    this.status = "more";
                    this.goodsData = this.reload ? res.data : this.goodsData.concat(res.data); //数据 追加
                    console.log(this.goodsData);
                    if (res.data.length == 0) {
                        this.empty = `没找到与“${this.category}${this.params.search}"相关的宝贝`;
                    }
                    this.params.page = res.data.current_page; //当前页码
                    this.last_page = res.data.last_page; //总页码
                },
            });
        },
        //异步加载商品列表
        async loadData() {
            // this.params.good_type_id = 'good';
            this.params.region_name = "托普·平邑仓";
            await uni.request({
                url: "/api/good/goodlist",
                data: this.params,
                success: (res) => {
                    uni.stopPullDownRefresh();
                    this.status = "more";
                    this.goodsData = this.reload ? res.data : this.goodsData.concat(res.data); //数据 追加
                    console.log(this.goodsData);
                    if (res.data.length == 0) {
                        this.empty = `没找到与“${this.category}${this.params.search}"相关的宝贝`;
                    }
                    this.params.page = res.data.current_page; //当前页码
                    this.last_page = res.data.last_page; //总页码
                },
            });
        },
        // 滚动底部加载猜你喜欢
        async loadlikeData() {
            await uni.request({
                url: `/wanlshop/product/likes?pages=${this.goodsType}`,
                success: (res) => {
                    this.likeData = res.data; //评论数据 追加
                },
            });
        },
        // 加载侧边栏数据
        async loadDrawer() {
            this.drawerParams.type = this.goodsType;
            await uni.request({
                url: "/wanlshop/product/drawer",
                data: this.drawerParams,
                success: (res) => {
                    var brand = [],
                        attribute = [];
                    if (res.data.brand) {
                        res.data.brand.forEach((item) => {
                            var brandData = {
                                id: item.id,
                                name: item.name,
                                fold: false, // 展开
                                choice: false,
                            };
                            brand.push(brandData);
                        });
                    }
                    if (res.data.attribute) {
                        res.data.attribute.forEach((item) => {
                            var value = [];
                            item.value.forEach((vo) => {
                                var valueData = {
                                    name: vo.name,
                                    choice: false,
                                };
                                value.push(valueData);
                            });
                            var attributeData = {
                                name: item.name,
                                value: value,
                                fold: false,
                            };
                            attribute.push(attributeData);
                        });
                    }
                    this.drawerData.brand = brand;
                    this.drawerData.attribute = attribute;
                },
            });
        },
        //筛选点击
        tabClick(index) {
            if (this.filterIndex === index && index !== 3) {
                return;
            }
            this.filterIndex = index;
            if (index === 3) {
                this.priceOrder = this.priceOrder === 1 ? 2 : 1;
            } else {
                this.priceOrder = 0;
            }

            // 排序方式
            if (index === 0) {
                this.params.sort = "weigh";
                this.params.order = "desc";
            }
            if (index === 1) {
                this.params.sort = "sales";
                this.params.order = "desc";
            }
            if (index === 2) {
                this.params.sort = "createtime";
                this.params.order = "desc";
            }
            if (index === 3 && this.priceOrder === 1) {
                this.params.sort = "price";
                this.params.order = "desc";
            }
            if (index === 3 && this.priceOrder === 2) {
                this.params.sort = "price";
                this.params.order = "asc";
            }
            this.status = "loading";
            this.params.page = 1;
            this.reload = true;
            this.getList();
            uni.pageScrollTo({
                duration: 300,
                scrollTop: 0,
            });
        },
        // 打开抽屉，并且加载品牌和类目属性
        showDrawer() {
            this.showRight = true;
            if (!this.drawerType.first) {
                this.loadDrawer();
                this.drawerType.first = true;
            }
        },
        // 点击抽屉
        onDraver(e) {
            var index = e.currentTarget.dataset.attribute,
                key = e.currentTarget.dataset.key;
            if (key == "brand" || key == "city") {
                // 取消所有选项,选中下面
                this.drawerData[key].forEach((item, keys) => {
                    keys != index ? (item.choice = false) : "";
                });
                // 取消同城
                this.drawerData.sameCity.choice = false;
                this.drawerData[key][index].choice = !this.drawerData[key][index].choice;
            } else if (key == "sameCity") {
                // 取消所有城市选项
                this.drawerData.city.forEach((item) => {
                    item.choice = false;
                });
                this.drawerData.sameCity.choice = !this.drawerData.sameCity.choice;
            } else {
                // 取消所有选项,选中下面
                this.drawerData.attribute[index].value.forEach((item, keys) => {
                    keys != key ? (item.choice = false) : "";
                });
                this.drawerData.attribute[index].value[key].choice = !this.drawerData.attribute[index].value[key].choice;
            }
        },
        // 提交抽屉
        onDrawerTo() {
            // 查询价格
            if (this.drawerData.price.low != "" && this.drawerData.price.high != "") {
                this.params.filter.price = this.drawerData.price.low + "," + this.drawerData.price.high;
                this.params.op.price = "BETWEEN";
            } else {
                delete this.params.filter.price;
                delete this.params.op.price;
            }
            // 查询地址
            var cityData = "";
            this.drawerData.city.forEach((item) => {
                if (item.choice) {
                    cityData = item.name;
                }
            });
            if (cityData) {
                this.params.filter["shop.city"] = "%" + cityData + "%";
                this.params.op["shop.city"] = "LIKE";
            } else if (this.drawerData.sameCity.choice) {
                this.params.filter["shop.city"] = this.drawerData.sameCity.name;
                this.params.op["shop.city"] = "LIKE";
            } else {
                delete this.params.filter["shop.city"];
                delete this.params.op["shop.city"];
            }
            // 查询品牌
            var brandData = "";
            this.drawerData.brand.forEach((item) => {
                if (item.choice) {
                    brandData = item.id;
                }
            });
            if (brandData) {
                this.params.filter.brand_id = brandData;
                this.params.op.brand_id = "=";
            } else {
                delete this.params.filter.brand_id;
                delete this.params.op.brand_id;
            }
            // 查询属性
            var attributeData = [];
            this.drawerData.attribute.forEach((item, index) => {
                // item.name
                item.value.forEach((vo, index) => {
                    if (vo.choice) {
                        attributeData.push("%" + vo.name + "%");
                    }
                });
            });
            // 1.0.8升级 有此项无法查询
            if (attributeData.length > 0) {
                this.params.filter.category_attribute = attributeData.join(",");
                this.params.op.category_attribute = "LIKE";
            } else {
                delete this.params.filter.category_attribute;
                delete this.params.op.category_attribute;
            }
            this.status = "loading";
            // 1.0.8升级
            this.goodsData = [];
            this.params.page = 1;
            this.reload = true;
            this.getList();
            this.closeDrawer();
        },
        // 重置抽屉
        onDrawerReset() {
            this.drawerData.city.forEach((item) => {
                item.choice = false;
            });
            this.drawerData.sameCity.choice = false;
            this.loadDrawer();
        },
        // 点击抽屉标题
        onDraverTitle(e) {
            var stype = e.currentTarget.dataset.key;
            if (stype === "city") {
                this.drawerType[stype] = !this.drawerType[stype];
            } else {
                this.drawerData.attribute[stype].fold = !this.drawerData.attribute[stype].fold;
            }
        },
        // 关闭抽屉
        closeDrawer() {
            this.showRight = false;
        },
        search() {
            this.$wanlshop.to(`/pages/page/search?type=${this.goodsType}`, "fade-in", 100);
        },
        editListstyle() {
            this.liststyle = this.liststyle == "col-1-10" ? "col-2-20" : "col-1-10";
        },
    },
    components: {
        ONavbar,
    },
};
</script>

<style lang="scss" scoped>
.page {
    .list {
        padding: 20rpx;
        box-sizing: border-box;
        &-item {
            background: #fff;
            padding: 20rpx;
            box-sizing: border-box;
            margin-top: 20rpx;
            .user-info {
                display: flex;
                align-items: center;
                width: 100%;
                height: 100%;
                position: relative;
                .flex-col {
                    display: flex;
                    flex-direction: column;
                    justify-content: space-between;
                }
                .pic {
                    width: 70rpx;
                    height: 70rpx;
                    border-radius: 50%;
                    background: #214a75;
                    margin-right: 20rpx;
                    overflow: hidden;
                    image {
                        width: 100%;
                        height: 100%;
                    }
                }
                .dot {
                    position: absolute;
                    top: 50%;
                    right: 20rpx;
                    transform: translateY(-50%);
                    display: flex;
                    align-items: center;
                    &-item {
                        width: 10rpx;
                        height: 10rpx;
                        border-radius: 50%;
                        margin-right: 10rpx;
                        background: #999;
                    }
                }
            }
            .remark {
                margin-top: 20rpx;
                background: #f5f5f5;
                color: #808080;
                padding: 20rpx;
                box-sizing: border-box;
                border-radius: 20rpx;
            }
            .title {
                margin-top: 30rpx;
            }
            .image-list {
                display: flex;
                padding: 20rpx 0;
                box-sizing: border-box;
                border-bottom: 1rpx solid #eee;
                image {
                    width: 210rpx;
                    height: 210rpx;
                    margin-right: 20rpx;
                }
            }
            .tips {
                background: #f2f7fa;
                font-size: 26rpx;
                color: #005a93;
                height: 80rpx;
                padding: 20rpx;
                box-sizing: border-box;
                border-radius: 20rpx;
                margin-top: 20rpx;
                position: relative;
                image {
                    position: absolute;
                    right: 20rpx;
                    top: 50%;
                    transform: translateY(-50%);
                }
            }
            .icon {
                display: flex;
                justify-content: space-between;
                align-items: center;
                height: 80rpx;
                &-item {
                    image {
                        width: 34rpx;
                        height: 34rpx;
                        margin-right: 20rpx;
                    }
                }
            }
        }
    }
    .tabs {
        display: flex;
        background: #fff;
        height: 80rpx;
        padding: 0 40rpx;
        box-sizing: border-box;
        &-item {
            min-width: 80rpx;
            height: 100%;
            line-height: 80rpx;
            text-align: center;
            margin-right: 20rpx;
        }
        .active {
            color: #214a75;
            border-bottom: 1rpx solid #214a75;
        }
    }
}
</style>
